<template>
  <div>
    <!-- 列表渲染 -->
    <el-table :data="showData" border style="width: 100%">
      <el-table-column fixed type="selection" width="50"> </el-table-column>
      <el-table-column label="商品信息" width="300" class="box">
        <template slot-scope="scope">
          <el-popover placement="top-start" title="" trigger="hover">
            <img
              :src="scope.row.mainPic"
              alt=""
              style="width: 150px; height: 150px"
            />
            <img
              slot="reference"
              :src="scope.row.mainPic"
              style="width: 40px; height: 40px"
            />
          </el-popover>
          <span class="goodsInt">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格" width="100"></el-table-column>
      <el-table-column prop="zip" label="排序" width="80"></el-table-column>
      <el-table-column prop="state" label="是否上架" width="80">
        <template slot-scope="scope">
          <el-switch
            active-color="#13ce66"
            inactive-color="#ff4949"
            v-model="scope.row.state"
            @change="changeSwitch(scope.row._id, scope.row.state)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="_id" label="id" width="230"></el-table-column>
      <el-table-column
        fixed="right"
        prop="goodsTime"
        label="创建时间"
        width="120"
      >
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
          <el-button type="text" size="small">下架</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalPage"
    >
    </el-pagination>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
export default {
  name: "",
  props: {
    activeIndex: "",
  },
  data() {
    return {
      tableData: [],
      state: true,
      pageSize: 2,
      currentPage: 1,
      totalPage: 100,
    };
  },
  watch: {
    activeIndex: {
      handler(newVal) {
        this.$http({
          path: "/goods/findAll",
          params: {
            page: 1,
            pageSize: this.pageSize,
            state: newVal,
          },
        }).then((res) => {
          this.tableData = res.data.data;
          if (this.activeIndex == 1) this.goodsListT();
          if (this.activeIndex == 2) this.goodsListF();
        });
      },
    },
  },
  methods: {
    // 改变pageSize触发事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.currentPage = 1;
      this.$http({
        path: "/goods/findAll",
        params: {
          page: this.currentPage,
          pageSize: this.pageSize,
          state: this.activeIndex,
        },
      }).then((res) => {
        this.tableData = res.data.data;
        console.log(this.pageSize);
      });
    },
    // 改变currentPage触发事件
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.$http({
        path: "/goods/findAll",
        params: {
          page: this.currentPage,
          pageSize: this.pageSize,
          state: this.activeIndex,
        },
      }).then((res) => {
        this.tableData = res.data.data;
        console.log(this.tableData);
      });
    },
    // 发请求
    fa() {
      this.currentPage = 1;
      this.$http({
        path: "/goods/findAll",
        params: {
          page: this.currentPage,
          pageSize: this.pageSize,
          state: this.activeIndex,
        },
      }).then((res) => {
        this.tableData = res.data.data;
        // console.log(this.tableData);
      });
    },
    // 点击上下架开关
    changeSwitch(id, state) {
      this.$http({
        path: "/goods/state",
        method: "post",
        params: {
          _id: id,
          state: state,
        },
      }).then((res) => {
        // console.log(res);
        this.fa();
        if (this.activeIndex == 1) this.goodsListT();
        if (this.activeIndex == 2) this.goodsListF();
      });
    },
    goodsListT() {
      this.$http({
        path: "/goods/queryT",
      }).then((res) => {
        console.log(res);
        this.totalPage = res.data.data.length;
      });
    },
    goodsListF() {
      this.$http({
        path: "/goods/queryF",
      }).then((res) => {
        console.log(res);
        this.totalPage = res.data.data.length;
      });
    },
  },
  computed: {
    // 展示一个showData来拼接数据并展示
    showData() {
      this.tableData.forEach((item) => {
        return (item.mainPic = "http://10.0.38.238:3000" + item.mainPic);
      });
      return this.tableData.filter((item) => {
        return item.state ? 1 : 2 == this.activeIndex;
      });
    },
  },
  created() {
    // 页面刷新时发请求渲染第一屏页面
    this.fa();
    this.goodsListT();
  },
};
</script>

<style scoped>
.goodsInt {
  width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  float: right;
  text-align: left;
  color: #fb8244;
}
</style>